import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/dark/css-vars.css'
import 'element-plus/dist/index.css'
import 'virtual:svg-icons-register'
import router from './router'
import globalComponent from './components'
import './styles/index.scss' //全局样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import pinia from './store'
import './permission'

const app = createApp(App)

app.directive('infinite-scroll', {
  // 当绑定元素挂载到 DOM 上时
  mounted(el, binding) {
    const handleScroll = () => {
      const { scrollTop } = el;
      const { scrollHeight } = el;
      const { offsetHeight } = el;
      const distance = binding.value || 0; // 设置默认距离或使用传入的距离
 
      if (scrollTop + offsetHeight >= scrollHeight - distance) {
        binding.value(); // 调用传入的函数执行加载更多的操作
      }
    };
 
    // 设置滚动事件监听
    el.addEventListener('scroll', handleScroll);
  }
});

//组件库
app.use(ElementPlus)
//图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
//自定义插件
app.use(globalComponent)
//注册路由
app.use(router)
//安装仓库
app.use(pinia)
app.mount('#app')
console.log('xcd',import.meta.env)